<script setup lang="ts">
import { useImage } from "@vueuse/core";
const url = "https://source.unsplash.com/random/400x300";
const { isLoading, error } = useImage(
  {
    src: url,
  },
  {
    // Just to show the loading effect more clearly
    delay: 2000,
  }
);
</script>
<template>
  <div>在浏览器中响应式加载图像，你可以等待结果显示或显示一个回退方案</div>
  <div>
    <div v-if="isLoading" class="loading gradient"></div>
    <div v-else-if="error">Couldn't load the image :(</div>
    <img v-else :src="url" />
  </div>
</template>

<style lang="less" scoped>
img {
  border-radius: 10px;
}

.loading {
  width: 400px;
  height: 300px;
  border-radius: 10px;
}

.gradient {
  background: linear-gradient(270deg, lightgray, darkgrey);
  background-size: 400% 400%;

  -webkit-animation: AnimationName 2s ease infinite;
  -moz-animation: AnimationName 2s ease infinite;
  animation: AnimationName 2s ease infinite;
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

body {
  font-family: sans-serif;
}



.container {
  display: flex;
  flex-direction: column;
  border: 2px solid gray;
  border-radius: 6px;
  margin: 16px 0;
  padding: 4px 8px;
}
</style>
